<template>
	<view class="content">
        <u-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" :fixed="true" :shadow="true"
            @leftClick="back" title="我的工资">
        </u-navbar>

        <view class="uni-area">
            <view class="u-m-t-50 u-font-32 font-bold">人员信息</view>
            <view class="u-m-t-30 uni-shadow">
                <view class="u-flex">
                    <u--image :showLoading="true" :src="staffInfo.profile?staffInfo.profile:'/static/logo.png'" 
                        radius="8" width="180rpx" height="210rpx">
                    </u--image>
                    <view class="u-m-l-30">
                        <view class="u-font-28">
                            <text class="u-m-r-74 font-bold">{{staffInfo.xm}}</text>
                            <text class="u-m-r-40 uni-gery-color">{{staffInfo.xb?staffInfo.xb:'暂无数据源'}}</text>
                            <text class="uni-gery-color">{{staffInfo.mz?staffInfo.mz:'暂无数据源'}}</text>
                        </view>
                        <view class="u-m-t-10 u-font-28">
                            <text class="u-m-r-16 uni-gery-color">电话:</text>
                            <uni-phone :phone="staffInfo.lxfs?staffInfo.lxfs:'暂无数据源'" size="28rpx" />
                        </view>
                        <view class="u-m-t-10 u-font-28">
                            <text class="u-m-r-16 uni-gery-color">班组:</text>
                            <text class="u-line-1">{{staffInfo.bzmc?staffInfo.bzmc:'暂无数据源'}}</text>
                        </view>
                        <view class="u-m-t-10 u-font-28">
                            <text class="u-m-r-16 uni-gery-color">工种:</text>
                            <text class="u-line-1">{{staffInfo.drzw?staffInfo.drzw:'暂无数据源'}}</text>
                        </view>
                        <view class="u-m-t-10 u-font-28">
                            <text class="u-m-r-16 uni-gery-color">证件号码:</text>
                            <text>{{$tools.formatIdentity(staffInfo.zjhm)}}</text>
                        </view>
                    </view>
                </view>
                <view class="u-m-t-30 u-font-28 font-bold u-line-1">{{staffInfo.qymc?staffInfo.qymc:'暂无数据源'}}</view>
                <view class="u-m-t-20 u-font-28 font-bold u-line-1">{{staffInfo.gcmc?staffInfo.gcmc:'暂无数据源'}}</view>
            </view>

            <view class="u-m-t-50 u-font-32 font-bold">工资信息</view>
            <view class="u-flex date">
                <u-icon name="clock" size="18"></u-icon>
                <view class="u-m-r-30 u-text-center u-font-28 uni-gery-color date-txt" @tap.stop="selectDate('bt')">{{date.bt}}</view>
                <text class="u-font-28">至</text>
                <view class="u-text-center u-font-28 uni-gery-color date-txt" @tap.stop="selectDate('et')">{{date.et}}</view>
            </view>

            <u-row class="u-m-t-30 uni-shadow" customStyle="flex-wrap:wrap" v-for="(tem,ind) in list" :key="ind">
                <u-col span="6" class="u-font-28" style="flex-direction:row">
                    <text class="u-m-r-20 uni-dec-color font-bold">发放月份</text>
                    <text>{{tem.ffgzny}}</text>
                </u-col>
                <u-col span="6" class="u-font-28" style="flex-direction:row">
                    <text class="u-m-r-20 uni-dec-color font-bold">发放日期</text>
                    <text>{{tem.createTime}}</text>
                </u-col>
                <u-col span="6" class="u-m-t-30 u-font-28" style="flex-direction:row">
                    <text class="u-m-r-20 uni-dec-color font-bold">发放金额</text>
                    <text>{{tem.sfje}}</text>
                </u-col>
                <u-col span="6" class="u-m-t-30 u-font-28" style="flex-direction:row">
                    <text class="u-m-r-20 uni-dec-color font-bold">实发工资</text>
                    <text>{{tem.sfje}}</text>
                </u-col>
            </u-row>
        </view>

        <u-datetime-picker :show="show" v-model="value" mode="date" :formatter="formatter"
            :closeOnClickOverlay="true"
            @cancel="show=false" @close="show=false" @confirm="confirm">
        </u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                parameter:{
                    bzid: null, // 班组id
                    rybh: null, // 人员编号
                },
                // 人员信息
                staffInfo:{
                    profile: '/static/logo.png',
                    xm: '安薪乐',
                    xb: '男',
                    mz: '汉',
                    lxfs: '18302882468',
                    bzmc: '加载中',
                    drzw: '加载中',
                    zjhm: '123456789101112131',
                    qymc: '企业名称',
                    gcmc: '项目名称',
                },
                // 日期选择
                show: false,
                value: this.$tools.formatTime(new Date()).ymd,
                type: 'bt',
                date:{
                    bt: this.$tools.formatTime(new Date()).ymd,
                    et: this.$tools.formatTime(new Date()).ymd,
                },
                list:[],
			}
		},

		onLoad(option) {
            this.parameter.bzid = option.bzid
            this.parameter.rybh = option.rybh
            // 人员详情
            this.getStaffDetail()
            // 工资信息
            this.getWgPersonalSalary()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 过滤函数
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },


            // 人员详情
            getStaffDetail(){
                uni.showLoading({ title:'人员详情加载中' })
                const api = JSON.parse(JSON.stringify(this.$apis.staffDetail))
                api.url = api.url+'/'+this.parameter.rybh
                this.$request(this,api,{}).then(res=>{
                    // console.log('人员详情',res)
                    this.staffInfo = res
                }).then()
            },
            // 工资信息
            getWgPersonalSalary(){
                const parameter = Object.assign( this.parameter,this.date ) 
                this.$request(this,this.$apis.wgPersonalSalary,parameter).then(res=>{
                    // console.log('工资信息',res)
                    this.list = res
                    if( this.list.length == 0 ) uni.$u.toast('暂无更多工资相关数据')
                }).then()
            },


            // 显示时间选择器
            selectDate(type){
                this.type = type
                this.value = this.date[type]
                this.show = true
            },
            // 选择时间
            confirm(e){
                this.date[this.type] = this.$tools.formatTime(new Date(e.value)).ymd
                this.show = false
                // 工资信息
                this.getWgPersonalSalary()
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .date{
            margin-top: 30rpx;
            height: 88rpx;
            background: #F6F7F8;
            border-radius: 8rpx;
            padding: 0 30rpx;
            .date-txt{
                width: 40%;
                margin-left: 30rpx;
            }
        }
    }
</style>
